<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-15 15:54:49
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-23 16:27:42
 * @FilePath: \cxl-admin\src\components\baseDialog\Index.vue
-->

<template>
    <el-dialog
        v-model="dialog.visible"
        :width="dialog.width"
        :show-close="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        class="custom-dialog"
    >
        <template #header="{ titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">
                    {{ dialog.title }} <span>{{ dialog.customId }}</span>
                </h4>
                <component
                    style="width: 18px; height: 18px; opacity: 0.45; margin-right: 8px; cursor: pointer"
                    is="CloseBold"
                    @click="onCloseDialog"
                />
            </div>
            <div class="condition">{{ dialog.condition }}</div>
        </template>
        <div class="content">
            <slot name="content"></slot>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { reactive, watchEffect } from 'vue'
/**
 * 接受来自父组件的传参
 */
const props = defineProps(['data'])

/**
 * 注册父组件回调方法
 */
const emits = defineEmits(['close'])

/**
 * 定义dialog数据
 */
const dialog = reactive({
    visible: false, //控制弹窗显示隐藏
    title: '', //弹窗标题
    width: '520px', //弹窗的宽度 例如：50% | 520px
    footer: false, //是否显示底部操作按钮
    customId: '', //客户编号
    condition: '' //筛选条件
})

/**
 * 通过监听props，来设置dialog属性值
 */
watchEffect(() => {
    dialog.visible = props.data.visible
    dialog.title = props.data.title
    dialog.condition = props.data.condition
    dialog.customId = props.data.customId
    dialog.width = props.data.width ? props.data.width : '520px'
    // console.log('dialog', props.data)
})

//监听点击关闭按钮
const onCloseDialog = () => {
    emits('close')
}
</script>

<style scoped lang="scss">
.my-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h4 {
        position: relative;
        padding-left: 8px;
        color: var(--color-black);
        font-size: 16px;
        font-weight: 600;

        &::before {
            content: '';
            width: 2px;
            height: 16px;
            background-color: var(--color-black);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }

        span {
            font-size: 14px;
            color: var(--text-color-secondary);
            font-weight: normal;
            margin-left: 6px;
        }
    }
}
.condition {
    padding-left: 8px;
    font-size: 14px;
    color: var(--text-color-secondary);
    font-weight: normal;
}
</style>
